<template>
  <AtomTable v-if="show&&attrs"
    :ref="ref"
    v-bind="attrs"
    :data="anc.dataSet.table"
    :queryData="queryData"
    @onload="load"
    @loadPage="loadPage"
    @handleEdit="handleEdit"
    @handleDelete="handleDelete"
    @handleDetail="handleDetail"
    @handleClick="handleClick"
    @handleDbClick="handleDbClick"
    @handleSelect="handleSelect"
    @handleCreate="handleCreate"
    @handleDeleteMultiple="handleDeleteMultiple"
    @handleSearch="handleSearch"
    @handleReset="handleReset"
    @handleColumnSort="handleColumnSort"
  ></AtomTable>
</template>

<script>
const ref = "table";
export default {
  name: ref,
  components: {},
  inject: ["anc"],
  data() {
    return {
      ref,
      show:false,
      attrs:null,
      queryData:{}
    };
  },
  props: {},
  watch: {},
  computed: {},
  created() {
    this.beforePageInit();
  },
  mounted() {
    this.$nextTick(() => {
      this.$set(this.anc.vms, this.ref, this);
      this.pageInit();
    });
  },
  methods: {
    /**
     * 页面加载前初始化
     */
    beforePageInit(){
      this.attrs = this.attrsTpl();
      this.show = true;
    },
    /**
     * 页面加载后初始化
     */
    pageInit(){

    },
    /**
     * @description: 获取表格属性
     * @param {*} attr
     * @return {*}
     */
    attrsTpl() {
      return {
        query: {
          show: false,
          labelWidth: 100, //label宽度
          labelPosition: "right", //label位置
          cols: 3, //一行几列
          onlyRead: false, //是否只读
          collapse: false,
          columns: [
            {
              title: "字段标题", //字段标题
              key: "key", //字段key
              line: false, //是否独占一行
              titleStyle: {},
              default: {
                value: "",
                empty: false,
                logic: "&&",
                operator: ">",
              },
              tip: {
                icon: "md-information",
                size: 16,
                iconStyle: {},
                theme: "light",
                placement: "top",
                content: "",
                contentStyle: {},
              },
              config: {
                //编辑器配置，可以是函数，参数为(item,index,data)
                editor: {
                  //编辑器配置
                  type: "text", //编辑器类型
                },
                style: {
                  //样式配置
                },
              },
              rules: [
                {
                  required: true,
                  type: "string",
                  message: "必填",
                  trigger: ["change", "blur"],
                },
              ],
            },
          ], //字段列表
          rules: {},
        },
        table: {
          config: {
            autoHeight: true,
            stripe: true, //条纹
            size: "default", //尺寸
            loading: false, //是否加载
            rowClassName: "", //行样式
            tableHeight: "auto", //表高
            style: {},
            checkColumn: true,
            numberColumn: true,
            action: true,
            additionalAction: true,
            sort: {
              asc: [],
              desc: [],
            },
            // actionFn:(row,column,index,item)=>{return true;},
            // additionalActionFn:(row,column,index,item)=>{
            //   if(row.name==='panhao'){
            //     item['disabled'] = true;
            //   }else{
            //     item['disabled'] = false;
            //   }
            //   return true;
            // },
          },
          columns: [
            {
              key: "name",
              title: "姓名",
              width: "auto",
              align: "center",
              show: true,
              sort: "asc",
              // config:{
              //   editor:{
              //     type:'text'
              //   }
              // }
            },
          ],
          additionalAction: {
            key: "additionalAction",
            title: "additionalAction",
            slot: "additionalAction",
            width: 200,
            fixed: "right",
            align: "center",
            buttons: [
              // {
              //     title:'abc',//按钮标题
              //     style:{},//按钮样式
              //     event:(row,column,index,item)=>{}//按钮事件
              // }
            ],
          },
        },
        navigation: {
          show: false,
          opts: [10, 30, 50, 100],
          page: { total: 0, pageSize: 10, pageNumber: 1 },
        },
        tools: {
          addButton: true,
          batchDeleteButton: true,
          searchIcon: true,
          downloadIcon: true,
          uploadIcon: true,
          uploadUrl: "/",
          tableSizeIcon: true,
          fullscreenIcon: true,
          refreshIcon: true,
          columnSettingIcon: true,
          columnSortIcon: true,
          buttons: [
            // {title:'abc',event:(btn)=>{console.log(btn)}}
          ],
        },
      };
    },
    /**
     * 事件：表格加载后获取表格实例
     * @param tableIns 表格实例，相当于 this.$refs[this.ref]
     */
    load(tableIns){

    },
    /**
     * 事件：加载分页数据
     * @param pageNavigation 分页导航
     * @param filter 过滤条件
     * @param orderBy 排序条件
     */
    loadPage(pageNavigation, filter, orderBy = {}) {
      //   //删除查询项中属性值为空的查询条件
      this.anc.loadPage(pageNavigation, filter, orderBy);
    },
    /**
     * 事件：编辑
     * @param row 行数据
     * @param index 行索引
     */
    handleEdit(row, index) {
      this.anc.handleEdit(row, index);
    },
    /**
     * 事件：删除
     * @param row 行数据
     * @param index 行索引
     */
    handleDelete(row, index) {
      this.anc.handleDelete(row, index);
    },
    /**
     * 事件：详情
     * @param row 行数据
     * @param index 行索引
     */
    handleDetail(row, index) {
      this.anc.handleDetail(row);
    },
    /**
     * 事件：选择
     * @param selection 选择的数据
     */
    handleSelect(selection) {
      
    },
    /**
     * 事件：排序
     * @param sort 排序数据
     */
    handleColumnSort(sort){},
    /**
     * 事件：点击
     * @param row 行数据
     * @param index 行索引
     */
    handleClick(row, index) {},
    /**
     * 事件：双击
     * @param row 行数据
     * @param index 行索引
     */
    handleDbClick(row, index) {},
    /**
     * 批量删除
     * @param selection 选中的行数据
     */
    handleDeleteMultiple(selection) {
      this.anc.handleDeleteMultiple(selection);
    },
    /**
     * 搜索
     * @param filter 过滤条件
     * @param defaultFilter 默认过滤条件
     * @param filterStr 过滤条件字符串
     */
    handleSearch(filter,defaultFilter,filterStr) {
      this.pageNavigation.pageNumber = 1;
      this.loadPage(this.pageNavigation, filter, this.orderBy);
    },
    /**
     * 重置
     * @param data 过滤条件
     * @param defaultData 默认过滤条件
     * @param advanceData 高级过滤条件
     */
    handleReset(data,defaultData,advanceData) {
      this.pageNavigation.pageNumber = 1;
      this.loadPage(this.pageNavigation, null, this.orderBy);
    },
    /**
     * 新增
     */
    handleCreate() {
      this.anc.handleCreate();
    },
    /**
     * 方法：设置表格内部数据
     * @param callback 回调函数，参数为objData
     */
    setTableData(callback){
      this.$refs[this.ref].setTableData(callback)
    },
    getOptionValue(options, value, key = "label") {
      let dataValue = "";
      let index = options.findIndex((d) => d.value === value);
      if (index !== -1) {
        dataValue = options[index][key];
      }
      return dataValue;
    },
    getSort(){
      return this.attrs.table.config.sort;
    },
    setPageTotal(total){
      this.$set(this.attrs.navigation.page,'total',total)
    },
    setPageNumber(page){
      this.$set(this.attrs.navigation.page,'pageNumber',page)
      this.$set(this.attrs.navigation,'page',{ total: 0, pageSize: 10, pageNumber: 1 })
    },
    setPageSize(size = this.attrs.navigation.opts[0]){
      this.$set(this.attrs.navigation.page,'pageSize',size)
    },
    toggleLoading(){
      this.attrs.config.loading = !this.attrs.config.loading;
    }
  },
};
</script>
<style scoped lang="scss">
</style>
